<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>文档</title>
  <link rel="stylesheet" href="/static/vendor/layui/css/layui.css">
  <link rel="stylesheet" href="/static/api/style.css">
  <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="/static/vendor/layui/layui.all.js"></script>
  <script src="/static/vendor/function.js"></script>
  <style>.layui-form-label{width:150px;}.layui-input-block{margin-left: 180px;}</style>
</head>
<body>
<div style="background:#393D49;">
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="/docs/index.html">文档系统</a></li>
  <li class="layui-nav-item layui-this"><a href="/docs/index.html">首页</a></li>
  <li class="layui-nav-item"><a href="/docs/jiami.html" target="_blank">加密</a></li>
  <li class="layui-nav-item"><a href="/docs/up.html" target="_blank">上传</a></li>
  <li class="layui-nav-item"><a href="/docs/conf.html" target="_blank">预设值</a></li>
</ul>
</div>
<div class="layui-row">
  <div class="layui-col-xs2">
    <blockquote class="layui-elem-quote">目录</blockquote>
    <ul id="demo"></ul>
  </div>
  <div class="layui-col-xs6">
    <h1 class="site-h1" id="name">调试工具 </h1>
    <blockquote class="layui-elem-quote" id="desc">接口描述</blockquote>
    <blockquote class="layui-elem-quote layui-quote-nm" id="url">接口地址</blockquote>
    <blockquote class="layui-elem-quote" id="method">提交方法</blockquote>

    <fieldset class="layui-elem-field">
      <legend>模拟表单</legend>
      <div class="layui-field-box" id="form">
          表单提交
      </div>
    </fieldset>
    <fieldset class="layui-elem-field">
      <legend>返回值</legend>
      <div class="layui-field-box">
      <pre id="rs">
          返回内容
      </pre>
      </div>
    </fieldset>
  </div>
  <div class="layui-col-xs3">
    <h2>返回示例:</h2>
    <pre id="reback_demo">
    </pre>
  </div>
</div>
<script>
$().ready(function(){
  //节点树
  var nodes = eval('(<?=stripslashes($nodes)?>)');
  layui.tree({
    elem: '#demo',
    nodes:nodes,
    click:function(node){
      build_page(node);
      get_reback_demo(node.data.url);
    }
  });

  //获取返回数据demo
  function get_reback_demo(url){
    $.ajax({
          url: '/docs/getdemo',
          type: 'POST',
          dataType: 'json',
          data:  {"url":encodeURI(url)},
          success: function(rs) {
            var str = formatJson(rs);
            $("#reback_demo").text(str);
          },
          error:function(){
            layer.msg('返回错误');
          }
    });
  }

  //表单ajax提交
  layui.form.on('submit(docs)', function(data){
      var url  = data.form.action;
      var post = data.field;
      $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data:  post,
            success: function(rs) {
              var str = formatJson(rs);
              $("#rs").text(str);
            },
            error:function(){
              layer.msg('返回错误');
            }
      });
      return false;
  });
});
//组建页面
function build_page(node){
  if(node.data==undefined)
    return false;
  $("#name").text(node.name);
  $("#desc").html(node.data.desc);

  var url = "http://"+document.domain+node.data.url;
  var method = node.data.method;
  var param  = node.data.param;
  $("#url").html(url);
  $("#method").html(method);
  $("#rs").text("返回数据");
  $("#reback_demo").text(node.data.reback_demo);

  var type = "docs";
  //模拟表单
  var form = '<form enctype="multipart/form-data" class="layui-form" method="post" action="/">';
    form += '<div class="layui-form-item"><label class="layui-form-label">接口</label><div class="layui-input-block"><input type="text" name="url" placeholder="url:接口地址" class="layui-input" value="'+node.data.url+'"></div></div>';
  for(var i in param){
    //form +='<div class="layui-form-item"><label class="layui-form-label">'+param[i].lable+':'+i+'</label><div class="layui-input-block"><input type="'+param[i].type+'" name="'+i+'" placeholder="'+i+':'+param[i].placeholder+'" class="layui-input" value="'+param[i].value+'"></div></div>';
        if(i=="token"){
      form +='<div class="layui-form-item"><label class="layui-form-label">'+param[i].lable+':'+i+'</label><div class="layui-input-block"><input type="'+param[i].type+'" name="'+i+'" placeholder="'+i+':'+param[i].placeholder+'" class="layui-input" value="<?=$token?>"></div></div>';
    }else{
            form +='<div class="layui-form-item"><label class="layui-form-label">'+param[i].lable+':'+i+'</label><div class="layui-input-block"><input type="'+param[i].type+'" name="'+i+'" placeholder="'+i+':'+param[i].placeholder+'" class="layui-input" value="'+param[i].value+'"></div></div>';
        }
  }

    form += '<div class="layui-form-item"><label class="layui-form-label">partner</label><div class="layui-input-block"><input type="text" name="partner" placeholder="partner:商户号" class="layui-input" value="5300"></div></div>';
    form += '<div class="layui-form-item"><label class="layui-form-label">签名</label><div class="layui-input-block"><input type="text" name="sign" placeholder="sign:签名" class="layui-input" value=""></div></div>';
  form += '<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="'+type+'">立即提交</button><a onclick="getSign(this)" class="layui-btn layui-btn-primary">获取签名</a></div></div></form>';
  $("#form").html(form);
}
//获取签名
function getSign(e){
    $(e).parents('form').submit(function(){return false;});
    var post = {};
    $(e).parents('form').find('input').each(function(i,a){
        post[$(a).attr('name')] = $(a).val();
    });
    $.ajax({
          url: "/docs/getsign",
          type: 'POST',
          dataType: 'json',
          data:  post,
          success: function(rs) {
              $("[name='sign']").val(rs.data.data);
          },
          error:function(){
              layer.msg('返回错误');
          }
    });
}
/**
 * 格式化显示json格式数据
 */
function formatJson(json, options) {
    var reg = null,
        formatted = '',
        pad = 0,
        PADDING = '    ';
    options = options || {};
    options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
    options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
    if (typeof json !== 'string') {
        json = JSON.stringify(json);
    } else {
        json = JSON.parse(json);
        json = JSON.stringify(json);
    }
    reg = /([\{\}])/g;
    json = json.replace(reg, '\r\n$1\r\n');
    reg = /([\[\]])/g;
    json = json.replace(reg, '\r\n$1\r\n');
    reg = /(\,)/g;
    json = json.replace(reg, '$1\r\n');
    reg = /(\r\n\r\n)/g;
    json = json.replace(reg, '\r\n');
    reg = /\r\n\,/g;
    json = json.replace(reg, ',');
    if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
        reg = /\:\r\n\{/g;
        json = json.replace(reg, ':{');
        reg = /\:\r\n\[/g;
        json = json.replace(reg, ':[');
    }
    if (options.spaceAfterColon) {
        reg = /\:/g;
        json = json.replace(reg, ': ');
    }
    $.each(json.split('\r\n'), function(index, node) {
        var i = 0,
            indent = 0,
            padding = '';
        if (node.match(/\{$/) || node.match(/\[$/)) {
            indent = 1;
        } else if (node.match(/\}/) || node.match(/\]/)) {
            if (pad !== 0) {
                pad -= 1;
            }
        } else {
            indent = 0;
        }
        for (i = 0; i < pad; i++) {
            padding += PADDING;
        }
        formatted += padding + node + '\r\n';
        pad += indent;
    });
    return formatted;
};
</script>
</body>
</html>
